import React from 'react';
import {Button,Icon,message,Alert} from 'antd'
import {toJS} from 'mobx';
import './style/';
import {WeaTools, WeaDialog, WeaLocaleProvider} from "ecCom";
import Setting_Tab from "./Setting_Tab";
const getLabel = WeaLocaleProvider.getLabel;
class Calendar extends React.Component {

constructor(props) {
    super(props);
}

state = {
    data:[],
    visible:false,
    richenId:"",
    count:"0",
    iscCount:"0",
    isSys:"1",
    hs:0,
    xq:0,
    bgColor:"#ffffff",
    bgTmd:"100"
}

//转换日期格式作为调用日程接口时间参数
changeDate = (_date, format)=> {
    var date = {
        "M+": _date.getMonth() + 1,
        "d+": _date.getDate(),
        "h+": _date.getHours(),
        "m+": _date.getMinutes(),
        "s+": _date.getSeconds(),
        "q+": Math.floor((_date.getMonth() + 3) / 3),
        "S+": _date.getMilliseconds()
    };
    if (/(y+)/i.test(format)) {
        format = format.replace(RegExp.$1, (_date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (var k in date) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
        }
    }
    return format;
}

getDatas = () => {
    let selectdate = this.changeDate(new Date(), "yyyy-MM-dd");
    WeaTools.callApi('/api/workplan/calendar/MyCalendar', 'POST', {viewType: '3', selectDate: selectdate}).then((result) => {
       //获取本周的日程数
        WeaTools.callApi('/api/workplan/calendar/getWorkPlanWeekCount', 'POST', {selectDate: selectdate}).then(data=> {
            WeaTools.callApi('/api/portal/calendar/getcalendar','GET',{
                "id":this.props.id
            }).then((setdata) => {
                if(setdata.isCz==true&&setdata.api_status==true){
                    let bg = setdata.setting.bgColor.split(',');
                    this.setState({data:result.events,count: data.count,iscCount:setdata.setting.isCount,xq:setdata.xq,hs:setdata.hs,bgColor:bg[0],bgTmd:bg[1]});
                }else {
                    this.setState({data:result.events,count: data.count,xq:setdata.xq,hs:setdata.hs});
                }

            });
        });
    });
}

 getXQ = () => {
    const xq = this.state.xq;
    if(xq==0){
        return getLabel(390779,"星期天");
    }else if(xq==1){
        return getLabel(390780,"星期一");
    }else if(xq==2){
        return getLabel(390781,"星期二");
    }else if(xq==3){
        return getLabel(390782,"星期三");
    }else if(xq==4){
        return getLabel(390783,"星期四");
    }else if(xq==5){
        return getLabel(390784,"星期五");
    }else if(xq==6){
        return getLabel(390785,"星期六");
    }

 }

    saveSetting= () =>{
        WeaTools.callApi('/api/portal/calendar/savecalendar','POST',{
            jsonStr: JSON.stringify({
                "isCount":this.state.iscCount,
                "id":this.props.id,
                "bgColor":this.state.bgColor+","+this.state.bgTmd
            })
        }).then(result => {
            if(result.api_status==true){
                this.setState({visible:false});
                message.success(getLabel(83551,"保存成功！"),2);
            }else {
                message.error(getLabel(84544,"保存失败！"),2);
            }
        })

    }

    //初始化获取数据
    componentDidMount(){
        this.getDatas();
    }

    onClose = () => {

    }

    //跳转more页面
    moreUrl = () => {
    window.open("/wui/index.html#/main/wp/myWorkPlan");
    }
    getDate = (value) => {
    let time = value.split(' ');
     return time[1];
    }

    //跳转对应的日程
    openRiChen = (id) => {
    window.open("/spa/workplan/static/index.html#/main/wp/workPlanCreateSingle?workPlanId="+id);
    }

    onCancel = () => {
    this.getDatas();
    this.setState({visible:false});
    }

    changeBgColor = (value) => {
    this.setState({bgColor: value});
    }

    changeCount = (value) => {
    this.setState({iscCount:value});
    }

    openDia = () => {
    this.setState({visible:true});
    }

 changeBgTmd = (value) => {
    this.setState({bgTmd: value});
 }

 changeHx = () => {

    let tmd = parseInt(this.state.bgTmd);
    if(tmd=='NaN'){
        tmd = 100;
    }

    const hxtmd = parseInt((tmd/100)*255);
    let temp = hxtmd.toString(16);
    if(hxtmd<10){
        temp ="0"+ temp;
    }
    return temp;

 }

    render() {
    const {data,count,visible,hs,bgColor,isSys,iscCount,bgTmd} = this.state;
        let display ="";
        if(this.props.isSetting==false){
            display="none";
        }
        let datas = data;
        if(data.length>5){
            datas = data.slice(0,5);
        }




        const bgcolor = this.state.bgColor+this.changeHx();

       let zero;
     if(hs<10){
         zero = 0;
     }

        return (
            <div className="portal-com-calendar" style={{"background-color":bgcolor,"border-radius": 12}}>
                <Icon  className="calendar-setting-Icon" onClick={this.openDia} type="setting" theme="filled" style={{"display":display}}/>


                {iscCount=="1"? <div className="portal-com-calendar-count">{count}</div>:<div></div>}
                <div className="portal-com-calendar-content">
                    <div className="portal-com-calendar-header">
                        <span className="portal-com-calendar-more"   style={{"font-size":12,"top":5}} >

                            <span onClick={this.moreUrl}>{getLabel(385419,"更多>>")}</span></span>
                    </div>
                    <div id="nowWeekday">{this.getXQ()}</div>
                    <div id="nowDate">{zero}{hs}</div>
                    <div class="demo"></div>
                    <div className="dataContent" >
                        <ul id="todayCalendarContent" >
                            {
                               data.length>0? datas.map((item) => {
                                    return (
                                        <li className="todo-item" onClick={() => this.openRiChen(item[0])}>
                                            <div className="Dian"></div>
                                            <span title={item[1]} className="_content">  {this.getDate(item[2])}  {item[1]}</span>
                                        </li>
                                    );
                               }):  <li className="todo-item">
                                   <div className="Dian"></div>
                                   <span  className="_content">{getLabel(83553,"暂无数据")}</span>
                               </li>
                            }
                        </ul>
                    </div>
                </div>

                <WeaDialog visible={visible} style={{height:220}} onCancel={this.onCancel} title={getLabel(30747,"设置")}>
                    <div style={{position:"relative",height:220}}>
                        <Setting_Tab settingInfo={this.state} changebgColor={this.changeBgColor} changeCount={this.changeCount} changeBgTmd={this.changeBgTmd}/>
                        <div style={{position:"absolute",bottom:7,"margin-left": "67%"}}>
                            <Button  type="primary" onClick={this.saveSetting}>{getLabel(33703,"确认")}</Button>
                            <Button onClick={this.onCancel} style={{"margin-left":10}}>{getLabel(31129,"取消")}</Button>
                        </div>
                    </div>
                </WeaDialog>
                </div>
        );
    }

}

export default Calendar;